<template>
  <view class="mt-[20rpx] border-b-solid border-b-1 border-[#EDEDED] pb-4" @click="emit('click')">
    <view class="text-md text-base font-bold line-clamp-2 mb-[20rpx] ">
      {{ data.title }}</view>
    <unfoldImage v-if="mode == 'spread'" :list="images"></unfoldImage>
    <wd-img v-else width="100%" height="390rpx" mode="aspectFill" :src='formatUrl(images)'></wd-img>
    <view class="flex justify-between items-center text-xs text-[#9A9A9A] mt-[14rpx]">
      <view>{{ data.create_time }}</view>
      <view class="flex items-center">
        <wd-icon name="/static/images/review.png" size="32rpx" />
        <text class="ml-1 mr-[40rpx] ">{{ commentTotal || data.commentTotal }}</text>
        <wd-icon name="/static/images/eye.png" size="32rpx" />
        <text class="ml-1 ">{{ data.visit }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import unfoldImage from "./unfold-image.vue";
import { getObjDeepProps, formatUrl } from "@/utils/format";
const props = defineProps({
  mode: {
    type: String,
    default: 'swiper'
  },
  data: {
    type: Object,
    required: true
  },
  imageKey: {
    type: [String, Number],
    default: "image"
  },
  commentTotal: {
    type: [String, Number],
    default: 0
  }
})
const images = computed(() => {
  const { data, imageKey } = props;
  return getObjDeepProps(data, imageKey);
})
const emit = defineEmits(['click']);
</script>

<style lang="scss" scoped></style>
